<template>
  <a-modal
      title="账号管理"
      width="900px"
      v-model:visible="visible"
      :confirm-loading="confirmLoading"
      :afterClose="remove"
      @ok="handleOk"
  >
    <a-tabs tab-position="left">
      <a-tab-pane key="1" tab="用户管理">
        <account-manage v-bind="$attrs"/>
      </a-tab-pane>
    </a-tabs>
  </a-modal>
</template>

<script lang="ts">
import {defineComponent, reactive, toRefs, ref} from 'vue'
import {Modal, Tabs} from 'ant-design-vue'
import {addSchema} from "./add-schema"
import {useAsync} from "@/hooks"
import AccountManage from './components/account-manage.vue'
import {cipherCreate} from "@/api/strategy/cipher"

export default defineComponent({
  name: "add-modal",
  components: {[Modal.name]: Modal, [Tabs.name]: Tabs, [Tabs.TabPane.name]: Tabs.TabPane, AccountManage},
  props: {
    remove: { // 移除模态框
      type: Function
    },
    callback: {
      type: Function
    }
  },
  setup(props) {
    const dynamicForm = ref<any>(null)

    const state = reactive({
      visible: true,
      confirmLoading: false,
      dynamicValidateForm: addSchema
    })

    const handleOk = () => {
      state.confirmLoading = true
      state.visible = false
      props.callback && props.callback()
    }

    return {
      ...toRefs(state),
      handleOk,
      dynamicForm,
    }
  }
})
</script>

<style scoped>
</style>
